import { Component, OnInit, ViewChild } from '@angular/core';
import { uniqueId, orderBy as _orderBy } from 'lodash';
import { DatatableComponent, SortDirective } from '@iux/live';

@Component({
  selector: 'app-demo4',
  templateUrl: './demo4.component.html',
  styles: [
    `
      button {
        margin-bottom: 0.16rem;
      }
    `,
  ],
})
export class Demo4Component implements OnInit {
  data;
  activeSort: { [key: string]: any } = { key: 'name', direction: 'asc' };

  @ViewChild(DatatableComponent, { static: false }) lvTable: DatatableComponent;
  @ViewChild(SortDirective, { static: false }) lvSort: SortDirective;

  constructor() {}

  ngOnInit() {
    this.initData();
  }

  initData() {
    this.data = Array.from({ length: 5 }).map((item, key) => {
      return this.initUser(key);
    });
  }

  initUser(key: number) {
    const colors = ['red', 'blue', 'green', 'orange'];
    const temp = { id: uniqueId('uid'), name: `user${key}`, age: 10 + key, expand: false, random: parseInt(Math.random() * 100 + '', 10) };
    temp['color'] = colors[temp.random % colors.length];
    return temp;
  }

  customSortAge<T>(data: T[], sortOptions: any): T[] {
    console.log('自定义排序方法：不改变源data排序');
    return _orderBy(data, [sortOptions.key], [sortOptions.direction]);
  }

  clearSort() {
    this.lvSort.clear();
  }

  stateChange(source: { [key: string]: any }) {
    console.log('state change:', source.sort);
  }
}
